<template>
	<view class="">
		<view class="modal show" @touchmove.stop.prevent="()=>false">
			<view class="my-post2">
				<view class="my-post-bg-box">
					<image class="my-post-bg" @click="goCollect()"
						src="https://images.linglinggong.net/XCX/newMy/index-popup.png"
						style="width: 630rpx;height: 812rpx" mode="aspectFill"></image>
					<image @click="close()" class="close2" style="left:-20rpx;top:-80rpx;"
						src="https://images.linglinggong.net/static/icon1/07.png">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'Collectpopup',
		data() {
			return {};
		},
		methods: {
			close() {
				this.$emit('collectClose')
			},
			goCollect() {
				uni.navigateTo({
					url: '/pages/collect-active/collect-active?type=0'
				})
				this.$emit('collectClose')
			}
		}
	})
</script>
<style lang="less" scoped>
	.modal {
		width: 100vw;
		height: calc(100vh - var(--status-bar-height) + 192rpx);
		pointer-events: none;
		background: transparent;
		transition: all .3s;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 16rpx);
		z-index: 999999999;
		background-color: #FFFFFF;

		.my-post2 {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.my-post-bg-box {
				position: relative;
				width: 630rpx;
				height: 680rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				justify-content: center;
				align-items: center;

				.ss {
					width: 100%;
					height: 55%;
					display: flex;
					justify-content: center;
					align-items: center;
					// border: 1px solid;
				}

				.inner {
					width: 480rpx;
					height: 400rpx;
					padding-top: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					// border: 1px solid;
					.inner-top {
						width: 41%;
						height: 50%;
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						padding-top: 18rpx;
						color: #F39B19;
						font-size: 34rpx;
						font-weight: 400;
						// margin-left: -100rpx;
						// border: 1px solid;
					}

					.inner-bottom {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 88%;
						height: 50%;
						padding-bottom: 60rpx;
						// padding-left: 50rpx;
						// border: 1px solid;
					}

					// border: 1px solid;
					.inner-left {
						padding-top: 20rpx;
						width: 35%;
						// border: 1px solid;
						font-size: 56rpx;
						color: #fff;
						font-weight: 600;
					}

					.inner-right {
						flex: 1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding-left: 65rpx;
						font-weight: 400;
						color: #FF6600;
						// border: 1px solid;
						// color: red;
					}
				}

				.close2 {
					position: absolute;
					left: 0;
					top: 0;
					width: 70rpx;
					height: 70rpx;
					// border: 1px solid;
					z-index: 9999999999;
				}
			}

			// display: inline-block;
		}
	}

	.show {
		display: flex;
		width: 100%;
		height: 100%;
		top: 0rpx;
		background: rgba(0, 0, 0, 0.40);
		pointer-events: auto;
		text-align: center;
		z-index: 9999;
	}
</style>
